精通 CSS Apply 规则：面向全球化 Web 开发的 Mixin 应用综合指南

在广阔且不断发展的 Web 开发领域，效率、可维护性和可扩展性至关重要。随着 CSS 样式表的复杂性与日俱增，管理重复代码并确保跨不同 Web 项目的一致性成为一个重大挑战。正是在这种背景下，“mixin” 的概念应运而生，成为一种强大的解决方案，为代码复用和简化开发工作流提供了坚实的机制。

本综合指南深入探讨了 CSS mixin 应用的世界，探索其基本原理、使用流行 CSS 预处理器的实际实现，以及原生 CSS @apply 规则的历史背景。我们将剖析 mixin 如何帮助开发者编写更清晰、更有组织且易于维护的 CSS，这对于跨时区和文化背景协作的团队来说至关重要，以确保在全球范围内提供一致的用户体验。

CSS 开发中 Mixin 的核心概念

从本质上讲，mixin 是一个 CSS 声明块，可以在整个样式表中重复使用。可以把它想象成编程语言中的函数，但它是为 CSS 服务的。您无需为各种元素重复定义同一组属性，而是在一个 mixin 中定义一次，然后在需要这些属性的任何地方简单地“包含”或“应用”该 mixin。这种对 “不要重复自己”（Don't Repeat Yourself, DRY）原则的遵守是现代高效 Web 开发的基础。

采用 mixin 的主要动机非常明确：

• 增强可复用性： 定义一次通用样式并在各处应用，减少冗余。

• 提高可维护性： 对样式块的更改只需在一个地方进行——即 mixin 定义中——这些更改会自动传播到使用该 mixin 的所有地方。这对于长期项目和大型团队来说非常有价值。

• 更强的一致性： 通过标准化常用设计模式（如按钮样式、排版比例或布局配置），确保网站或应用程序的观感统一。

• 减小文件体积（编译后）： 虽然预处理器源文件可能包含 mixin 定义，但编译后的 CSS 通常得益于更好的组织结构，不过最终文件大小取决于 mixin 被包含的次数及其编写效率。

• 加速开发进程： 有了预定义的样式块，开发者可以更快地构建组件和页面，专注于独特的方面而不是重复的样式任务。

历史上，在纯 CSS 中实现这种级别的可复用性是具有挑战性的。开发者通常 resorting to utility classes or complex selector chains，这可能导致冗长的 HTML 或难以管理的样式表。CSS 预处理器的出现彻底改变了这一点，而最近，像自定义属性这样的原生 CSS 特性也为管理重复样式提供了新途径。

CSS 预处理器中的 Mixin：可复用性的主力军

像 Sass（Syntactically Awesome Style Sheets）、Less 和 Stylus 这样的 CSS 预处理器长期以来一直是扩展 CSS 功能的首选工具，它们引入了类似编程的特性，包括变量、函数，以及至关重要的 mixin。虽然它们的语法不同，但它们对 mixin 的基本理念非常相似：定义一个可复用的样式块，然后包含它。

Sass Mixin：深入应用

Sass 作为最受欢迎且功能最丰富的预处理器之一，提供了一个强大的 mixin 系统。它通过参数、默认值和内容块提供了灵活性，使其在各种用例中都非常强大。

定义一个基础 Mixin

在 Sass 中，mixin 使用 @mixin 指令定义，后跟一个名称。为清晰起见，该名称通常使用 kebab-case（短横线命名法）。

示例：基础居中 Mixin

@mixin center-element { display: flex; justify-content: center; align-items: center; }

这个简单的 mixin 封装了使用 Flexbox 将元素居中所需的常用属性。如果没有 mixin，每次需要居中时都必须重复这三行代码。

包含一个 Mixin

要使用已定义的 mixin，您需要在 CSS 规则中使用 @include 指令。编译时，预处理器会将 @include 调用替换为 mixin 中的实际 CSS 声明。

示例：包含居中 Mixin

.card { width: 300px; height: 200px; background-color: #f0f0f0; @include center-element; } .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); @include center-element; }

编译后，.card 类的 CSS 输出将如下所示：

.card { width: 300px; height: 200px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; }

这展示了 mixin 的基本力量：更少的代码编写，更易于管理。

带参数的 Mixin：动态样式

当引入参数时，mixin 的真正威力才得以显现，这使得它们能够接受动态值。这使得创建高度灵活和适应性强的样式块成为可能。

位置参数

参数在 mixin 名称后的括号中定义，类似于函数参数。在包含 mixin 时，您需要按相同的顺序传递值。

示例：动态按钮样式

@mixin button-styles($bg-color, $text-color, $padding) { display: inline-block; padding: $padding; background-color: $bg-color; color: $text-color; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; font-weight: bold; } .btn-primary { @include button-styles(#007bff, #fff, 10px 20px); } .btn-secondary { @include button-styles(#6c757d, #fff, 8px 16px); }

现在，这个 mixin 允许您通过简单地为背景颜色、文本颜色和内边距提供不同的参数来生成各种按钮样式，从而大大减少了重复代码。

关键字参数和默认值

Sass 还支持关键字参数，允许您按名称传递值，这提高了可读性，特别是对于有很多参数的 mixin。您还可以为参数分配默认值，使其在包含 mixin 时成为可选项。

示例：带默认值的响应式排版 Mixin

@mixin responsive-text($font-size, $line-height: 1.5, $color: #333) { font-size: $font-size; line-height: $line-height; color: $color; } .hero-heading { @include responsive-text(48px, 1.2, #1a1a1a); } .body-text { @include responsive-text(16px); /* line-height 默认为 1.5, color 默认为 #333 */ } .caption { @include responsive-text($font-size: 14px, $color: #777); /* line-height 默认为 1.5 */ }

默认值对于提供合理的备用选项和减少常见场景下需要传递的参数数量非常有用。关键字参数增强了清晰度，尤其是在参数顺序可能不那么直观的情况下。

可变参数（...）用于可变数量的输入

对于 mixin 需要接受任意数量参数的场景，Sass 提供了使用 ... 的可变参数。这对于接受多个值的属性（如 box-shadow 或 text-shadow）特别有用。

示例：灵活的阴影 Mixin

@mixin multi-shadow($shadows...) { box-shadow: $shadows; } .element-with-shadow { @include multi-shadow(0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.2)); } .another-element { @include multi-shadow(inset 0 0 10px red); }

这个 mixin 可以灵活地处理传递给它的任何数量的阴影定义，并将它们直接编译到 box-shadow 属性中。

带内容的 Mixin：传递样式块

Sass 中的 @content 指令是一个强大的功能，它允许您将一个 CSS 规则或声明块直接传递到 mixin 中。这对于创建包装器或应应用某些样式的特定上下文非常有价值。

示例：带内容的媒体查询 Mixin

@mixin breakpoint($point) { @if $point == desktop { @media (min-width: 1024px) { @content; } } @else if $point == tablet { @media (min-width: 768px) and (max-width: 1023px) { @content; } } @else if $point == mobile { @media (max-width: 767px) { @content; } } } .my-component { width: 100%; /* 默认移动优先 */ @include breakpoint(tablet) { width: 75%; margin: 0 auto; } @include breakpoint(desktop) { width: 50%; max-width: 960px; margin: 0 auto; } }

在此示例中，@mixin breakpoint 内的 @content 指令允许您直接在组件的规则集内为不同的屏幕尺寸定义特定样式，从而使媒体查询与相关组件保持局部化。这种模式在管理响应式设计和提高样式表的可读性方面非常流行，尤其是在全球团队中普遍存在的基于组件的架构中。

高级 Mixin 模式和注意事项

Mixin 可以与其他 Sass 功能结合，创建更复杂和动态的样式。

Mixin 内的条件逻辑

您可以在 mixin 内部使用 @if、@else if 和 @else 指令来根据条件应用样式。这使得 mixin 的配置性非常高。

示例：感知主题的按钮 Mixin

@mixin themed-button($theme: default) { @if $theme == default { background-color: #007bff; color: #fff; } @else if $theme == dark { background-color: #343a40; color: #fff; } @else if $theme == light { background-color: #f8f9fa; color: #333; border: 1px solid #ddd; } @else { @warn "Unknown theme #{$theme} used in themed-button mixin."; background-color: #ccc; color: #000; } padding: 10px 20px; border-radius: 5px; cursor: pointer; } .btn-buy { @include themed-button(dark); } .btn-checkout { @include themed-button(light); }

这个 mixin 根据指定的主题提供不同的按钮样式，为一致地管理视觉变化提供了一种稳健的方式。

Mixin 中的循环

Sass 循环（@for、@each、@while）可以集成到 mixin 中，以编程方式生成重复样式，例如间距工具类或列网格。

示例：使用循环的间距工具类 Mixin

@mixin generate-spacing-utilities($max: 5, $step: 5px) { @for $i from 1 through $max { $value: $i * $step; .margin-#{$i} { margin: $value; } .padding-#{$i} { padding: $value; } } } @include generate-spacing-utilities(5, 10px); /* 这将生成类似 .margin-1 { margin: 10px; } 直到 .margin-5 { margin: 50px; } 的类 */

这个 mixin 生成一组用于一致间距的工具类，节省了大量手动工作，并确保了统一的设计系统。在大型、全球分布的项目中，这样的工具类非常宝贵，因为开发者需要快速访问标准化的间距值。

Mixin vs. 函数 vs. 占位符 (%extend)

Sass 提供了其他一些看起来与 mixin 相似但用途不同的功能：

• 函数：Sass 函数（使用 @function 定义）计算并返回单个值。它们用于计算、颜色操作或字符串操作。它们不直接输出 CSS。而 mixin 则输出 CSS 属性。

  示例：函数 vs. Mixin

  @function px-to-rem($px) { @return $px / 16px * 1rem; /* 函数返回一个计算值 */ } .element { font-size: px-to-rem(24px); } @mixin custom-heading($font-size) { font-size: $font-size; /* Mixin 输出 CSS */ font-weight: bold; } .page-title { @include custom-heading(px-to-rem(32px)); }

• 占位符 (%extend)：占位符选择器（例如 %button-base）与 mixin 类似，因为它们包含可复用的样式块，但它们旨在通过 @extend 指令进行扩展。与每次包含时都会复制 CSS 声明的 mixin 不同，@extend 会智能地对选择器进行分组，通过防止重复可能导致编译后的 CSS 文件更小。然而，如果使用不当，尤其是在复杂的嵌套选择器中，@extend 有时会导致意外的选择器输出或更大的文件大小。通常，mixin 更适合包含不同的属性块，而 @extend 更适合在相关组件之间共享通用的基础样式。

  示例：Mixin vs. Extend

  @mixin alert-style { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } %message-base { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } .alert-success { @include alert-style; background-color: #d4edda; color: #155724; } .message-error { @extend %message-base; background-color: #f8d7da; color: #721c24; }

  .alert-success 的编译输出将复制 alert-style 的属性。对于 .message-error，%message-base 的属性将与 .message-error 选择器分组。

  /* mixin 的编译输出 */ .alert-success { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; background-color: #d4edda; color: #155724; } /* extend 的编译输出 */ .message-error, .some-other-class-that-extends-it { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } .message-error { background-color: #f8d7da; color: #721c24; }

  在 mixin 和 @extend 之间进行选择通常取决于具体情况：mixin 用于独立的、可能带参数的属性块，而 @extend 用于在不同选择器之间共享一组基础规则，并且最小化重复至关重要。

Less 和 Stylus 中的 Mixin

虽然 Sass 被广泛采用，但 Less 和 Stylus 也提供了类似的 mixin 功能：

• Less Mixin：在 Less 中，mixin 本质上是您可以调用的 CSS 规则集。它们的定义就像常规的 CSS 类或 ID 一样，通过在另一个规则集中简单地调用其名称来包含。Less mixin 也可以接受参数和默认值。

  示例：Less Mixin

  .border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } #header { .border-radius(10px); } .footer { .border-radius(); /* 使用默认的 5px */ }

  Less 还有参数化 mixin（带参数的 mixin）和守卫 mixin（使用 when 关键字的条件 mixin）。

• Stylus Mixin：Stylus 提供了可能是最灵活的语法，允许省略括号和冒号。Mixin 只是可以被包含的代码块。Stylus 也支持参数、默认值以及类似于内容块的概念（虽然不是像 Sass 那样通过显式的 @content 指令，而是通过块参数）。

  示例：Stylus Mixin

  border-radius(radius = 5px) -webkit-border-radius radius -moz-border-radius radius border-radius radius #header border-radius 10px .footer border-radius

  Stylus 语法的灵活性可以产生非常简洁的代码。

无论使用哪种预处理器，核心优势都保持不变：将重复的 CSS 抽象成可复用的块，极大地帮助管理大型和不断演变的全球化应用程序的样式表。

原生 CSS @apply 规则：历史视角与现状

虽然预处理器 mixin 是前端开发中一个成熟且必不可少的部分，但 CSS 工作组也探索了将类似的可复用性引入原生 CSS 的方法。这导致了 @apply 规则的提议，该规则旨在与 CSS 自定义属性（CSS 变量）协同工作。

提议的 @apply 规则是什么？

CSS @apply 规则是一个实验性的 CSS 功能，旨在允许作者定义自定义属性集，然后将它们应用于元素，本质上充当原生 CSS 的自定义属性 mixin。它看起来像这样：

示例：提议的原生 @apply（已废弃）

:root { --brand-button-theme: { background-color: #007bff; color: #fff; padding: 10px 20px; border-radius: 5px; }; } .my-button { @apply --brand-button-theme; font-weight: bold; text-transform: uppercase; }

这个想法很有吸引力：使用自定义属性语法定义一组命名的属性（一个“mixin”或“属性集”），然后使用 @apply 包含它。这将提供一种无需预处理器即可管理 CSS 声明包的原生方式。

为什么它被提议以及为什么它被废弃

@apply 背后的动机很明确：解决重复相同 CSS 声明块的问题。虽然 CSS 自定义属性（例如 --main-color: blue; color: var(--main-color);）允许复用值，但它们本身不允许复用属性组。@apply 旨在弥合这一差距，将一种 CSS “部分”或“mixin” 的形式原生引入浏览器。

然而，@apply 规则最终被废弃并从 CSS 规范中移除。其废弃的主要原因包括：

• 复杂性和性能：在浏览器中高效地实现 @apply 比预期的要复杂得多，特别是在应用的属性集的变化如何级联并触发布局/绘制操作方面。

• 与其他功能的重叠：它与 CSS 自定义属性自身不断发展的功能有显著重叠，并且通过改进自定义属性和新的原生功能，有可能实现更强大的解决方案。

• 风格上的担忧：一些人认为其语法和语义笨拙，可能导致难以调试的级联问题。

截至目前，原生 CSS @apply 规则不是标准的一部分，不应在生产环境中使用。浏览器对它的支持很少，并且已经被移除。

当前原生 CSS 中的替代方案

虽然 @apply 已不复存在，但原生 CSS 已经发展到为可复用性提供强大的替代方案，主要通过对 CSS 自定义属性的稳健使用和战略性的组件设计。

CSS 自定义属性 (CSS 变量)

自定义属性允许您定义可复用的值，然后可以应用于多个 CSS 属性，甚至用于计算。虽然它们不组合属性，但它们在管理设计令牌和全局主题变量方面非常有效。

示例：使用自定义属性复用值

:root { --primary-color: #007bff; --text-color-light: #f8f9fa; --button-padding: 10px 20px; --border-radius-default: 5px; } .btn-primary { background-color: var(--primary-color); color: var(--text-color-light); padding: var(--button-padding); border-radius: var(--border-radius-default); /* ...其他属性... */ } .card-header { background-color: var(--primary-color); padding: var(--button-padding); border-radius: var(--border-radius-default) var(--border-radius-default) 0 0; /* ... */ }

这种方法有效地集中了值，通过修改单个自定义属性就可以轻松地在整个网站上更改主色调或内边距。这对于全球品牌和主题化非常有益，可以快速适应不同地区的设计偏好或季节性活动。

工具类和基于组件的 CSS

对于组合属性，标准的原生 CSS 方法仍然是使用工具类或定义良好的组件类。像 Bootstrap、Tailwind CSS 等框架都大量利用了这种模式。

示例：用于可复用性的工具类

/* CSS */ .flex-center { display: flex; justify-content: center; align-items: center; } .btn { display: inline-block; padding: 10px 20px; border-radius: 5px; cursor: pointer; } .btn-primary { background-color: blue; color: white; } /* HTML */

虽然这将一些样式责任转移到了 HTML（通过添加更多类），但它是在纯 CSS 中管理可复用样式块的一种被广泛接受且性能很高的方式。它与现代 JavaScript 框架（如 React、Vue 和 Angular）无缝集成，这些框架提倡基于组件的开发。

选择正确的方法：预处理器 vs. 原生 CSS

鉴于预处理器和原生 CSS 功能的优势，决定使用哪种方法来实现类似 mixin 的功能取决于项目需求、团队熟悉度和所需样式的复杂性。

何时使用预处理器 Mixin

• 复杂逻辑和计算：当您的样式需要高级逻辑（@if、@for、@each）、复杂的数学计算或动态属性生成时，预处理器 mixin 更优越。

• 供应商前缀：虽然 Autoprefixer 在后处理中处理这个问题，但预处理器 mixin 可以直接封装供应商前缀，这是其历史上的一个主要用例。

• 深度嵌套和继承（需谨慎使用）：预处理器使嵌套选择器和继承属性变得容易，这有时可以简化复杂的组件样式（尽管过度使用嵌套可能导致过于具体且难以覆盖的 CSS）。

• 成熟的工具链：如果您的团队已经在使用预处理器并且有成熟的工作流程，那么利用其 mixin 功能是很自然的选择。

• 参数化可复用性：当您需要创建接受多个参数的高度可定制的样式块时（例如，用于动态网格列或灵活按钮尺寸的 mixin）。

何时仅依赖原生 CSS（和自定义属性）

• 较简单的项目：对于较小的项目或样式需求不那么复杂的项目，为预处理器增加构建步骤的开销可能不合理。

• 性能关键环境：在非常精简的环境中，减少构建工具链的复杂性有时可以加快开发周期。

• 值复用：对于简单地复用通用值（颜色、字体、间距单位），CSS 自定义属性是原生的、高性能且对开发者友好的解决方案。

• 运行时操作：自定义属性可以在运行时用 JavaScript 操作，而预处理器 mixin 则不可能（因为它们编译成静态 CSS）。

• 互操作性：自定义属性是浏览器原生的，这使得它们无需源映射或预处理器知识即可被普遍理解和调试。

混合方法和后处理器

许多现代开发工作流程采用混合方法。通常会使用像 Sass 这样的预处理器来利用其强大的功能（包括用于复杂逻辑和参数化样式的 mixin），然后使用像 PostCSS 这样的后处理器。带插件的 PostCSS 可以执行以下任务：

• 自动添加前缀：自动添加供应商前缀。

• CSS 压缩：减小文件大小。

• Polyfilling 未来 CSS：将新的、实验性的 CSS 功能转换为广泛支持的 CSS（但不再包括 @apply）。

• 自定义属性回退：确保对旧浏览器的兼容性。

这种组合允许开发者充分利用两者的优点：预处理器在编写时的表达能力，以及后处理器在部署时的优化和面向未来的能力。

Mixin 应用的全球最佳实践

无论选择何种工具，采用 mixin 应用的最佳实践对于维护一个干净、可扩展和协作的代码库至关重要，特别是对于一致性和清晰度至关重要的全球团队。

1. Mixin 的命名约定

为您的 mixin 采用清晰、描述性且一致的命名约定。使用 kebab-case，并确保名称准确反映 mixin 的用途。

• 好的： @mixin flex-center, @mixin button-variant($color), @mixin font-size($scale)

• 不好的： @mixin fc, @mixin btn(c), @mixin fs (过于神秘)

2. 组织 Mixin（部分文件和模块）

随着项目的增长，您的 mixin 库也会增长。将 mixin 组织到逻辑性的部分文件中（例如 _mixins.scss, _typography.scss, _buttons.scss），并将它们导入到您的主样式表中。这促进了模块化，并使开发者能够轻松找到和复用现有的 mixin。

示例结构：

scss/ ├── base/ │ ├── _reset.scss │ └── _typography.scss ├── components/ │ ├── _button.scss │ └── _card.scss ├── layouts/ │ └── _grid.scss ├── utilities/ │ ├── _mixins.scss /* 所有通用 mixin */ │ └── _functions.scss ├── vendors/ │ └── _normalize.scss └── main.scss

如果 _mixins.scss 变得太大，您可以在其中为不同类别的 mixin 创建特定的文件（例如 _mixins-layout.scss, _mixins-effects.scss）。

3. 文档化 Mixin

对于大型或全球分布的团队来说，对 mixin 进行详尽的文档化是必不可少的。解释每个 mixin 的作用，它接受哪些参数（它们的类型、默认值），并提供使用示例。像 SassDoc 这样的工具可以根据您 Sass 文件中的注释自动生成文档，这极大地帮助了来自不同背景的新团队成员的入职。

示例：文档化一个 Mixin

/// 生成响应式内边距工具类。 /// @param {Number} $max - 工具类的最大索引（例如，5 代表 .padding-5）。 /// @param {String} $step - 内边距的基本单位（例如，'5px', '0.5rem'）。 /// @example /// @include generate-padding-utilities(3, 10px); /// // .padding-1 { padding: 10px; } /// // .padding-2 { padding: 20px; } /// // .padding-3 { padding: 30px; } @mixin generate-padding-utilities($max, $step) { /* ... mixin 代码 ... */ }

4. 性能考虑

虽然 mixin 促进了更干净的代码，但要注意编译后的 CSS 输出：

• 输出大小：每次 @include 一个 mixin，其 CSS 属性都会在编译输出中被复制。对于多次包含的大型 mixin，这可能导致更大的 CSS 文件大小。在构建过程中使用压缩来缓解这个问题。

• 编译时间：具有大量循环或条件逻辑的非常复杂的 mixin，或大量的 mixin 包含，都可能增加 CSS 编译时间。在可能的情况下优化 mixin 的效率。

• 特异性：Mixin 本身不会引入超出其所在选择器的特异性问题。但是，要确保您的 mixin 生成的 CSS 与您的整体 CSS 架构的特异性规则很好地集成。

5. 可访问性影响

虽然 mixin 是一种 CSS 编写工具，但它们生成的样式直接影响可访问性。确保任何与焦点状态、颜色对比度或交互元素相关的 mixin 都遵守 WCAG（Web 内容可访问性指南）标准。例如，一个按钮 mixin 应该包含适当的焦点样式。

示例：Mixin 中可访问的焦点样式

@mixin interactive-focus-styles { &:focus-visible { outline: 2px solid var(--focus-ring-color, #007bff); outline-offset: 2px; } } .my-link { @include interactive-focus-styles; color: blue; text-decoration: underline; }

使用 :focus-visible（或其 polyfill）是现代可访问性的最佳实践，因为它仅在用户使用键盘或其他非指针输入导航时显示焦点轮廓。

6. 可维护性与团队协作

对于全球团队而言，一致性是关键。建立明确的指导方针，规定何时创建新 mixin，何时修改现有 mixin，以及何时选择更简单的工具类或原生 CSS 自定义属性。代码审查对于确保遵守这些指导方针和维护一个高质量、可读的代码库至关重要，以便来自各种技术背景的开发者都能理解和贡献。

CSS 可复用性的未来趋势

Web 平台在不断发展。虽然预处理器 mixin 仍然非常重要，但 CSS 工作组继续探索可能影响我们未来如何处理可复用性的新原生功能。

• 容器查询：虽然不是直接替代 mixin，但容器查询（@container）允许元素根据其父容器的大小而不是视口来设置样式。这使得能够创建更真正封装的、可复用的组件，其中组件的内部布局可以根据其可用空间进行调整，而不管它被放置在页面的哪个位置。这减少了对复杂的全局媒体查询 mixin 的需求。

• CSS 层 (@layer)：CSS 层提供了一种将样式表组织成不同层的方法，让开发者对级联有更多的控制权。这有助于管理特异性并防止意外的样式覆盖，间接支持更好地组织可复用样式。

• 未来类似“Mixin”的原生功能：关于类似于 @apply 或预处理器 mixin 的原生 CSS 功能的讨论仍在进行中。社区承认需要对声明进行分组，未来的规范可能会引入新的机制，以一种高性能且语义合理的方式来解决这个问题。

了解这些发展对于确保您的 CSS 架构面向未来，并确保您的 mixin 应用策略与最新的 Web 标准保持一致至关重要。

结论

“CSS apply 规则”，特别是在 mixin 应用的背景下，代表了现代前端开发中的一个关键概念。虽然原生 CSS @apply 规则已被废弃，但 CSS 中对可复用性、模块化和可维护性的根本需求比以往任何时候都更加强烈。

像 Sass、Less 和 Stylus 这样的 CSS 预处理器继续提供强大而灵活的 mixin 功能，使开发者能够编写更高效、动态和可管理的样式表。通过利用带参数、内容块和条件逻辑的 mixin，开发者可以将复杂的样式模式抽象成可复用的组件，从而极大地减少重复并提高大型项目和全球设计系统的一致性。

此外，理解原生 CSS 自定义属性在值复用方面的强大功能，结合战略性地使用工具类和基于组件的 CSS，构成了构建高性能和可维护 Web 界面的完整工具集。预处理器的强大功能与原生 CSS 的效率相结合，辅之以在命名、组织、文档和可访问性方面严格遵守全球最佳实践，是当今专业 CSS 开发的标志。

随着 Web 平台的发展，我们的样式处理方法也将随之演变。通过掌握 mixin 应用的艺术并关注新兴的 CSS 功能，开发者可以确保他们的样式表不仅功能齐全，而且优雅、可扩展，并为应对为真正的全球受众构建的挑战做好准备。